CSS-i kerimisajaskaala vahemiku piiramine: animatsioonivahemike piiride meisterdamine

CSS-i kerimisajaskaalade tulek on muutnud radikaalselt meie animatsioonide lähenemist, võimaldades neid otseselt kerimisprotsessi abil juhtida. See pakub fluidsemat ja intuitiivsemat kasutajakogemust. Kuid nagu iga võimsa tööriistaga, on selle käitumise täpne juhtimine poleeritud tulemuste saavutamiseks ülioluline. Siin tulebki mängu CSS-i kerimisajaskaala vahemiku piiramine, keerukas funktsioon, mis võimaldab arendajatel määratleda ja jõustada rangelt piire selle jaoks, millal animatsioon kerimisajaskaalal peaks toimuma.

Varem võisid kerimisajendiga juhitavad animatsioonid kogemata liiga vara alata või liiga hilja jätkuda, põhjustades ebameeldivaid visuaalseid efekte või kasutamata võimalusi kaasahaaravateks interaktsioonideks. Vahemiku piiramine lahendab selle, pakkudes arendajatele võimalust määrata keritava konteineri täpne vahemik, kus animatsioon peaks aktiivne olema. See ajaveebipostitus süveneb CSS-i kerimisajaskaalade vahemiku piiramise kontseptsiooni, uurides selle süntaksit, praktilisi rakendusi ja seda, kuidas see annab teile võimaluse luua robustsemaid ja keerukamaid veebianimatsioone.

CSS-i kerimisajaskaalade mõistmine

Enne vahemiku piiramisse sukeldumist on kasulik teha lühike ülevaade CSS-i kerimisajaskaaladest. Kerimisajaskaalad võimaldavad teil animatsiooni edenemist otseselt siduda elemendi (nagu peamine dokumendi vaade või konkreetne keritav konteiner) kerimisasendiga. Animatsiooni kestuse protsendi asemel määratakse animatsiooni edenemine selle järgi, kui kaugele on keritav element keritud.

Selle funktsionaalsuse keskmes on animation-timeline CSS-i atribuut. Seda saab seada väärtusele auto (mis vaikimisi kasutab lähimat keritavat esivanemat, sageli vaadet) või määratletud kerimisajaskaala nimele.

Vaadake lihtsat näidet:

            
.animated-element {
  animation: myScrollAnimation linear;
  animation-timeline: scroll(block nearest);
}

            

              
                Copy
              
            
          

Selles koodilõigus myScrollAnimation liigub edasi, kui kasutaja kerib lähimat keritavat konteinerit. Siiski, ilma vahemiku piiramiseta, võib see animatsioon alata kohe, kui element muutub nähtavaks ja jätkuda, kuni see täielikult kaob, mis võib hõlmata palju suuremat kerimisala kui kavatsetud.

Mis on kerimisajaskaalade vahemiku piiramine?

Vahemiku piiramine, ametlikult tuntud kui kerimisajendiga juhitavate animatsioonide vahemiku juhtimine, tutvustab konkreetse kerimisvahemiku määramise kontseptsiooni animatsiooni jaoks. See vahemik määrab, millal animatsioon peaks olema aktiivne võrreldes keritava konteineri kogu keritava kaugusega. Kui kerimisasend jääb selle määratletud vahemiku väljapoole, peatub animatsioon tõhusalt või naaseb oma alg-/lõppolekusse, tagades, et see animeerub ainult arendaja määratud piirides.

See on eriti võimas stsenaariumide puhul, kus soovite, et animatsioon toimuks ainult kerimise teatud faasi ajal, näiteks:

• Elemendi kuvamine ainult siis, kui see siseneb teatud vaateosa.
• Ülemineku käivitamine ainult siis, kui kasutaja kerib mööda teatud punkti.
• Animatsiooni lõpuleviimine konteineri nähtavates piirides, vältides selle venitamist üle kogu lehe.

Vahemiku piiramise süntaks

Vahemiku piiramine on rakendatud animation-range atribuudi abil, mis töötab koos animation-timeline'iga. animation-range atribuut võtab vastu kaks väärtust, mis esindavad kerimisvahemiku algus- ja lõpp-punkte.

Vahemiku väärtuste mõistmine

animation-range väärtused on tavaliselt väljendatud protsentides või märksõnadena, mis viitavad keritava konteineri mõõtmetele. Kõige tavalisemad ja intuitiivsemad ühikud on:

• Protsent (%): Protsent keritava konteineri kõrgusest (ploki telje jaoks) või laiusest (reaskaela jaoks). 0% viitab keritava ala algusele ja 100% selle lõpule.
• Märksõnad:
• cover: Esindab kogu keritavat mõõdet.
• contain: Esindab samuti kogu keritavat mõõdet.

animation-range süntaks on:

            
animation-range: [ <length-percentage> | cover | contain ] [ <length-percentage> | cover | contain ]

            

              
                Copy
              
            
          

Tavalisemalt näete seda määratletuna kahe eraldi väärtusega, mis määratlevad vahemiku alguse ja lõpu:

            
animation-range: algus-väärtus lõpp-väärtus;

            

              
                Copy
              
            
          

Tavalised vahemiku stsenaariumid ja näited

Uurime erinevaid viise animation-range kasutamiseks:

1. Animeerimine elemendi sisenedes ja väljudes vaatest

Väga levinud kasutusjuhtum on elemendi animeerimine, kui see keritakse vaatesse ja seejärel võib-olla jälle välja. Tavaline vahemik oleks punktist, kus elemendi ülemine serv jõuab vaateala alumisse serva, kuni punktini, kus selle alumine serv lahkub vaateala ülemisest servast.

Selleks kasutame sageli märksõnu nagu entry ja exit, mis on lühendid konkreetsetele protsentidele võrreldes keritava konteineriga.

• entry: Viitab punktile, kus element siseneb kerimisvaatesse (nt elemendi alumine osa vaateala alumises osas).
• exit: Viitab punktile, kus element lahkub kerimisvaatest (nt elemendi ülemine osa vaateala ülemises osas).

Nii et animeerimiseks elemendi vaatesse sisenedes ja täielikult väljudes:

            
.reveal-on-scroll {
  animation-name: fadeIn;
  animation-timeline: scroll(block nearest);
  animation-range: entry exit;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

            

              
                Copy
              
            
          

See konfiguratsioon tagab, et fadeIn animatsioon (0% kuni 100% läbipaistvus) on täpselt kaardistatud kerimiskaugusele elemendi vaatesse sisenemise ja sealt väljumise vahel. Kui element on täielikult vaatest väljas, piirdub animatsiooni edenemine 100% või 0% -ga, mis tõhusalt külmutab selle.

2. Animeerimine kindla protsendi ulatuses keritavast alast

Saate määratleda vahemiku, kasutades protsente kogu keritavast kõrgusest. Näiteks, et animeerida elementi ainult keritava ala keskmise 50% ulatuses:

            
.mid-scroll-animation {
  animation-name: slideIn;
  animation-timeline: scroll(block nearest);
  animation-range: 25% 75%;
}

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

            

              
                Copy
              
            
          

Siin töötab slideIn animatsioon alates 25% kogu keritavast kõrgusest kuni 75% -ni. Enne 25% on animatsioon oma from olekus (translateX(-100%)). Pärast 75% on see oma to olekus (translateX(0)).

3. Animeerimine elemendi positsiooni järgi selle konteineris

Mõnikord soovite, et animatsiooni juhiks elemendi positsioon oma konteineri suhtes, mitte kogu dokumendi. scroll() funktsioon võib võtta konkreetse elemendi viite.

            
.scrolling-container {
  overflow-y: scroll;
  height: 500px;
}

.fixed-element-animation {
  animation-name: backgroundColorChange;
  animation-timeline: scroll(block #scrolling-container);
  animation-range: 0% 50%; /* Kerimisala esimese poole jooksul animeerimine */
}

@keyframes backgroundColorChange {
  from { background-color: lightblue; }
  to { background-color: lightgreen; }
}

            

              
                Copy
              
            
          

Selles näites on #scrolling-container element, mille kerimisasend juhib animatsiooni. Animatsioon toimub, kui kasutaja kerib #scrolling-container'i keritava kõrguse esimese 50% ulatuses.

4. Täpsemate vahemike jaoks märksõnade kasutamine

Märksõnad entry ja exit on võimsad. Neid saab kombineerida ka protsentide või muude märksõnadega, et luua nüansirikkamaid vahemikke.

• entry 100%: Animatsioon algab, kui element siseneb kerimisvaatesse, ja jätkub, kuni kerimisvaade on kerinud 100% konteineri kõrgusest (st element on täielikult altpoolt vaatest väljas).
• 0% exit: Animatsioon algab keritava ala algusest ja lõpeb, kui element lahkub kerimisvaatest.
• entry cover: See on paljude praktiliste eesmärkide jaoks sarnane entry exit'iga, kattes elemendi kogu kerimisreisi.

Kaaluge kerimisriba animeerimist, mis täitub, kui kasutaja kerib:

            
.progress-bar {
  animation-name: fillProgress;
  animation-timeline: scroll(block nearest);
  animation-range: 0% exit;
}

@keyframes fillProgress {
  from { width: 0%; }
  to { width: 100%; }
}

            

              
                Copy
              
            
          

Siin algab kerimisriba 0% laiusega ja animeerub 100% laiuseks, kui kasutaja kerib keritava ala algusest kuni elemendi täieliku vaatest väljumiseni. See on klassikaline stsenaarium kerimisajendiga juhitavate edenemisindikaatorite jaoks.

5. Piiramine konkreetsete sektsioonide jaoks

Võib juhtuda, et soovite, et animatsioon toimuks ainult lehe kindlas sektsioonis, sõltumata üldisest kerimiskaugusest. Saate seda saavutada, määrates vahemiku, mis hõlmab osa sektsiooni keritavast kõrgusest võrreldes selle asukohaga dokumendis.

            
.section-animation {
  animation-name: highlightSection;
  animation-timeline: scroll(block nearest);
  animation-range: 40% 60%; /* Kerimisala 40% ja 60% vahel animeerimine */
}

@keyframes highlightSection {
  from { background-color: yellow; }
  to { background-color: transparent; }
}

            

              
                Copy
              
            
          

See rakendab esiletõstuefekti ainult siis, kui element asub 40% ja 60% ulatuses oma kerimiskonteineri kerimiskõrgusest. Selle vahemiku väljaspool jääb selle taust mõjutamata (või naaseb selle vaikeseisundisse/animatsioonieelse olekusse).

Täpsem vahemiku juhtimine ja servajuhtumid

Vahemiku piiramine pakub peenjuhtimist, kuid selle nüansside mõistmine on selle meisterdamise võti.

Telje määramine

Vaikimisi viitab scroll(block nearest) vertikaalsele kerimisele. Kui töötate horisontaalsete kerimiskonteineritega, kasutate scroll(inline nearest). animation-range väärtused vastavad seejärel protsentidele keritavast laiusest.

            
.horizontal-scroll-container {
  overflow-x: scroll;
  white-space: nowrap;
}

.horizontal-animation {
  animation-name: slideAcross;
  animation-timeline: scroll(inline #horizontal-scroll-container);
  animation-range: 0% 100%; /* Kogu horisontaalse keritava laiuse ulatuses animeerimine */
}

@keyframes slideAcross {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); } /* Näide: elementide liigutamine */
}

            

              
                Copy
              
            
          

Vastupidised vahemikud

On võimalik määratleda vahemik, kus algväärtus on suurem kui lõppväärtus. See loob vastupidise vahemiku. Vastupidises vahemikus edeneb animatsioon edasi, kui keritakse üles (või kerimisjärjestuse vastupidises suunas), ja tagasi, kui keritakse alla.

            
.inverse-scroll-animation {
  animation-name: fadeOut;
  animation-timeline: scroll(block nearest);
  animation-range: 75% 25%; /* Vastupidine vahemik */
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

            

              
                Copy
              
            
          

Koos animation-range: 75% 25% algab animatsioon 75% -lt ja läheb 25% -ni. See tähendab, et allapoole kerides (kerimisprotsendi vähenedes) edeneb animatsioon 75% -lt 25% -ni. Kui keriksite tagasi ülespoole (kerimisprotsendi suurenemisel), edeneb animatsioon 25% -lt 75% -ni.

Mitu ajaskaalat ja vahemikku

Ühel elemendil võib olla mitu animatsiooni, millest igaühel on oma ajaskaala ja vahemik. See võimaldab keerukaid kihilisi animatsioone. Samuti saate sama animatsiooni määrata mitmele ajaskaalale erinevate vahemikega.

Brauseritugi ja kaalutlused

Kerimisajendiga juhitavad animatsioonid, sealhulgas vahemiku piiramine, on suhteliselt uus funktsioon. Kuigi tugi kasvab kiiresti, on oluline kontrollida brauserite ühilduvust (nt saidil caniuse.com) ja pakkuda vanemate brauserite jaoks varukoopiaid. Tavaliselt vanemad brauserid ei toeta neid täiustatud kerimisajendiga funktsioone ja animatsioonid ei pruugi lihtsalt töötada või naasta traditsioonilistele CSS-i animatsioonidele, kui need on rakendatud progressiivse täiustusena.

Progressiivne täiustus on võti: Veenduge alati, et teie sisu jääb kättesaadavaks ja funktsionaalseks ilma kerimisajendiga juhitavate animatsioonideta. Animatsioonid peaksid täiustama kasutajakogemust, mitte olema selleks hädavajalikud.

Praktilised kasutusjuhtumid ja globaalsed näited

Vaatame, kuidas vahemiku piiramist saab rakendada erinevat tüüpi veebisaitidel ja rakendustes kogu maailmas.

1. Interaktiivne jutustamine ja toimetuslik sisu

Veebisaidid, millel on pikad artiklid, interaktiivsed lood või ajaloolised ajaskaalad, saavad vahemiku piiramist kasutada sisu järkjärguliseks kuvamiseks, kui kasutaja kerib. Kujutage ette ajaloolist ajaskaalat, kus erinevad ajastud tõstetakse esile või visuaalid animeeruvad vaatesse ainult siis, kui kasutaja kerib vastavasse sektsiooni.

Globaalne näide: Virtuaalne muuseumiekspositsioon võiks kasutada vahemiku piiramist artefakti üksikasjade või ajalooliste kontekstide pop-upide animeerimiseks ainult siis, kui kasutaja kerib konkreetse eksponeeritava artefaktini. Näiteks Tokyos asuv kasutaja, kes kerib läbi Vana-Rooma ekspositsiooni, võib näha Rooma mosaiike vaatesse animeerumas, kui ta jõuab sellesse sektsiooni, ja seejärel tekstifades sisse, kui ta selle ekspositsiooni vahemikus edasi kerib.

2. E-kaubanduse tootelehed

Tootelehti saab muuta kaasahaaravamaks kerimisajendiga juhitavate animatsioonide abil. Näiteks 360-kraadine tootevaatur võiks lehel allapoole kerides oma vaadetes animeeruda või funktsioonide kutsungud võiksid vaatesse animeeruda, kui kuvatakse vastavaid tooteparklaid.

Globaalne näide: Pariisis asuv veebimoe jaemüüja võiks esitleda uut kleiti. Kui kasutajad kerivad tootelehel allapoole, võib kleidimudel peenelt poose muuta (animeeritud kerimisvahemiku kaudu) või animeeritud infograafikud võiksid ilmuda, näidates kanga päritolu või säästva tootmise üksikasju, kõik käivitatud kerimisasendi abil konkreetsete tooteseaduste piires.

3. Portfoolio ja agentuuri veebisaidid

Tööde esitlemine on disainerite ja agentuuride jaoks ülioluline. Kerimisajaskaalad võimaldavad loomingulisi esitlusi, kus projektielemendid animeeruvad fookusesse, kui kasutaja portfooliot uurib.

Globaalne näide: Brasiilias asuv graafiliselt disainistuudio võiks esitleda oma projekte. Kui külastaja kerib projekti juhtumiuuringut, võiksid erinevad disainielemendid (nagu traadiraamid, maketid või lõplikud kujundused) animeeruda vaatesse järjest, kasutades iga etapi jaoks erinevaid kerimisvahemikke. See loob juhtumiuuringu jaoks narratiivse voo, mis sarnaneb digitaalse raamatu lehtede pööramisega.

4. Sisseelamis- ja õpetuskogemused

Veebirakenduste või SaaS-toodete puhul saab sisseelamist muuta interaktiivsemaks. Järkjärgulised õpetused võivad kasutada kerimisajaskaalasid kasutajate juhendamiseks funktsioonide kaudu, kus selgitused ja kasutajaliidese esiletõstetud osad ilmnevad kindlatel kerimispunktidel.

Globaalne näide: Singapuris asuv finantstehnoloogia idufirma võiks pakkuda uut investeerimisplatvormi. Nende sissejuhatav õpetus võiks kasutada vahemiku piiramist erinevate armatuurlaua elementide esiletõstmiseks. Kui kasutaja kerib õpetuse sektsiooni, võib konkreetne graafik animeerida oma andmepunkte ilmumas, millele järgneb selle graafiku tekstiline selgitus, kõik eelnevalt määratletud kerimissegmentides iga funktsiooni jaoks.

5. Andmete visualiseerimine

Keerulised andmete visualiseerimised võivad olla üle jõu käivad. Kerimisajaskaalad võivad murda andmed seeditavateks tükkideks, animeerides erinevaid graafiku või joonise osi, kui kasutaja kerib, mida juhivad täpsed vahemikud.

Globaalne näide: Globaalne uudisteorganisatsioon võiks esitada kliimamuutuste andmete aruande. Kui kasutajad kerivad artiklit allapoole, võivad animeeritud infograafiku erinevad sektsioonid ilmuda: esmalt aastakümnete jooksul globaalset temperatuuri tõusu näitav tulpdiagramm, seejärel CO2 tasemeid näitav joonisgraafik, igaüks ilmub ja animeerub oma määratletud kerimisvahemikus lehel, muutes keerulised andmed ülemaailmse publiku jaoks kättesaadavaks.

Näpunäited tõhusaks vahemiku piiramiseks

• Alustage selge kavatsusega: Enne CSS-i kirjutamist määrake täpselt, millal soovite animatsiooni kerimisega seoses toimuda. Mis on käivituspunkt? Mis on lõpp-punkt?
• Kasutage üldiste juhtumite jaoks protsendipõhiseid vahemikke: Kui animatsioonid on seotud üldise vaateala nähtavuse või kerimisprotsessiga, on protsendid (0% kuni 100%) väga tõhusad ja arusaadavad.
• Kasutage elemendi nähtavuse jaoks entry ja exit: Kui soovite, et animatsioon oleks otseselt seotud elemendi ilmumise ja kadumisega vaatealasse, on entry ja exit teie peamised märksõnad.
• Testige erinevatel seadmetel ja vaatealadel: Kerimise käitumine võib seadmetes veidi erineda. Testige alati oma kerimisajendiga juhitavaid animatsioone, eriti vahemiku piiramist, erinevatel ekraanisuurustel ja seadmetel, et tagada ühtlane käitumine.
• Kaaluge jõudlust: Kuigi kerimisajendiga juhitavad animatsioonid on üldiselt jõudlussõbralikud, võib väga väikeste kerimisvahemikega seotud keerukate animatsioonide liigne kasutamine siiski jõudlust mõjutada. Optimeerige oma animatsioonid ja veenduge, et neid rakendatakse ainult seal, kus need lisavad olulist väärtust.
• Kasutage arendaja tööriistu: Kaasaegsed brauseri arendaja tööriistad (nagu Chrome'i DevTools) pakuvad suurepärast tuge kerimisajendiga juhitavate animatsioonide kontrollimiseks ja silumiseks. Saate sageli visualiseerida kerimisajaskaalasid ja animatsioonivahemikke otse inspektoris.
• Pakkuge varukoopiaid: Nagu mainitud, veenduge, et teie sait töötab hästi ka ilma kerimisajendiga juhitavate animatsioonideta. See võib hõlmata CSS-i meediapäringute või JavaScripti kasutamist toe tuvastamiseks ja alternatiivsete animatsioonide või staatilise sisu pakkumiseks.

Järeldus

CSS-i kerimisajaskaala vahemiku piiramine on võimas täiustus, mis toob kerimisajendiga juhitavatesse animatsioonidesse uue taseme täpsust ja juhtimist. Võimaldades arendajatel animatsioonide jaoks täpseid piire määratleda, aitab see luua poleeritumaid, tahtlikumaid ja kaasahaaravamaid kasutajakogemusi. Olenemata sellest, kas loote interaktiivseid jutustusi, dünaamilisi tootepaigutusi või informatiivseid andmete visualiseerimisi, animation-range mõistmine ja rakendamine annab teile võimaluse luua keerukaid animatsioone, mis reageerivad intelligentselt kasutaja kerimiskäitumisele.

Kuna brauseritugi jätkab küpsemist, on kerimisajendiga juhitavad animatsioonid koos vahemiku piiramisega muutumas moodsa veebiarendaja tööriistakomplekti põhitoodeks, mis võimaldab loomingulist juhtimist liikumise üle, mis tundub integreeritum ja loomulikum kui kunagi varem. Võtke see funktsioon omaks, et tõsta oma veebidisainid kõrgemale tasemele ja köita oma ülemaailmset publikut sujuvate, täpselt juhitavate animatsioonidega.